import React, { Component } from 'react'
import './Main.css'
import { Route, Switch, Redirect } from 'react-router-dom'
import about from '../../about/about.jsx'
import home from '../../home/home.jsx'
import parameter from '../../parameter/parameter.jsx'

export default class Main extends Component {
  render() {
    return (
      <div className="Main">
        {/* 加了Switch同样的路径只会匹配第一次，提高效率 */}
        <Switch>
          {/*
            exact：开启严格匹配，默认是模糊匹配。路由匹配方式：从左到右匹配
              模糊匹配：路由跳转 /about/a/b 当没有a、b页面时会匹配的about页面
              严格匹配：路由跳转 /about/a/b 只会匹配/about/a/b页面，没有就是没有
          */}
          <Route exact path="/about" component={about} />
          <Route path="/home" component={home} /> {/* 加Switch /home路径会匹配到home页面 */}
          <Route path="/home" component={about} />  {/* 不加Switch /home路径会匹配到about页面 */}
          <Route path="/parameter" component={parameter} />  {/* 不加Switch /home路径会匹配到about页面 */}
          <Redirect to="/home" /> {/* 当路由匹配不到页面的时候，重定向到/home页 */}
        </Switch>
      </div>
    )
  }
}
